<template>
  <div class="common-layout">
    <el-container>
      <!-- 头部 -->
      <el-header>
        <span>嗨购电商管理平台</span>
        <p v-if="username">
          欢迎您
          <span>{{ username }}</span>
          <el-button plain @click="removeuser">注销登录</el-button>
          <!-- <el-button @click="removeuser"></el-button> -->
        </p>
        <el-button v-else @click="goLogin">没有账号,去注册</el-button>
      </el-header>
      <el-container>
        <!-- 左侧 -->
        <el-aside width="200px">
          <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
            :default-active="$route.path" text-color="#fff" router>

            <!-- 循环数据 -->
            <template v-for="item in CurrentMenuData" :key="item.id">
              <el-menu-item v-if="item.children.length == 0" :index="item.path">
                <span>{{ item.title }}</span>
              </el-menu-item>
              <el-sub-menu v-else :index="item.id">
                <template #title>
                  <el-icon>
                    <Setting />
                  </el-icon>
                  <span>{{ item.title }}</span>
                </template>
                <!-- 子 -->
                <el-menu-item v-for="sonitem in item.children" :key="sonitem.id" :index="sonitem.path">
                  <el-icon>
                    <Avatar />
                  </el-icon>
                  <span>{{ sonitem.title }}</span>
                </el-menu-item>
              </el-sub-menu>
            </template>
            <!-- 循环数据结束 -->

          </el-menu>
        </el-aside>
        <!-- 内容 -->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { getCurrentMenu } from "@/grants/menuData"

const $route = useRoute();
const CurrentMenuData = getCurrentMenu()
// import {ref} from "vue"

// let username = ref<string>("")
const $router = useRouter();

let username = localStorage.getItem("username");

const goLogin = () => {
  $router.replace("/Login");
};

const removeuser = () => {
  // console.log("1");

  ElMessageBox.confirm("注销提示", "是否注销", {
    confirmButtonText: "是",
    cancelButtonText: "点错了",
    type: "warning",
  }).then(() => {
    ElMessage({
      type: "success",
      message: "已注销",
    });
    localStorage.clear();
    $router.replace("/Login");
  }).catch(() => {
    // console.log('用户取消注销');
  })
};
</script>

<style scoped>
.common-layout {
  height: 100%;
}

.el-container {
  height: 100%;
}

.el-aside {
  background-color: #545c64;
}

.el-main {
  height: 100%;
  background-color: antiquewhite;
}

.el-header {
  background-color: skyblue;
  line-height: 60px;
  font-size: 30px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/deep/.el-dropdown {
  margin: 5px 20px !important;
}
</style>